<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>搜索</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/all.css" />
		<link rel="stylesheet" href="css/search.css" />
		<link rel="stylesheet" href="css/sent-task.css" />
	</head>
	<style type="text/css">
		.middle{
			position: absolute;
		    top: .4rem;
		    bottom: 0rem;
		    overflow-y: scroll;
		}
		
	</style>
	<body>
		<div>
			<div class="heads">
				<span onclick="go()"><img src="img/zuojiantou.png" alt="" class="arrows"></span>
				<div class="sousuo">
					<img class="sousuos" src="img/sousuo.png" alt="">
					<input type="text" placeholder="搜索你感兴趣的内容" class="resetUpwd-input" />
				</div>
				<div class="sousuo-one">
					<span onclick="ajaxLoad(1)">搜索</span>
				</div>
			</div>
			<div class="middle">
				<!--<div onclick="location.href='./advertising-details.html'">
					<div class="content flex">
						<div class="tupian">
							<img class="tupians" src="img/501072207.png" alt="">
						</div>
						<div class="character">
							<p class="characters">苹果公司推出经过全新设计的系列笔记本电脑还能记得吃不能回复啊想吃撒才能尽快送你吃藕</p>
							<span class="num">3</span><span class="nums">个红包正在进行</span>
						</div>
					</div>
				</div>-->
			 
			</div>
		</div>
		<script src="js/x_rem.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/secondLevel.js"></script>
		<script src="js/all.js"></script>
		<script>
			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.middle', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			//ajax请求
			function ajaxLoad(_loadIndex) {
				//更新发向服务器的数据，添加页数key值
				$.ajax({
					type: "post",
					url: Url + "/browseTask/findPageBrowseTask",
					xhrFields: {
						withCredentials: true
					},
					data: {
						"page": _loadIndex,
						"Rows": 4,
						"title": $(".resetUpwd-input").val()
					},
					success: ((data) => {
						_loadState = 0;
						console.log(data);
						let html = "";
						if(data == "") {
							_loadState = 1;

							$(".nowLoad").text("我也是有底线的。。。");
						}
						for(let i = 0; i < data.length; i++) {
							html += `		
								 
									
									
									
									
									
									
									
									<div onclick="location.href='./advertising-details.html?id=${data[i].browseTask.browseTaskId}'">
										<div class="content flex">
											<div class="tupian">
												<img class="tupians" src="${data[i].browseTask.picture}" alt="">
											</div>
											<div class="character">
												<p class="characters">${data[i].browseTask.title}</p>
												<span class="num">${data[i].browseTask.envelopesNum}</span><span class="nums">个红包正在进行</span>
											</div>
										</div>
									</div>
										
									`
							$(".middle").html(html);

						}

					}),
					error: ((err) => {
						console.log(err);
					})
				});

			}

			//			ajaxLoad(_loadIndex);
		</script>
	</body>

</html>